import React, { forwardRef } from 'react';
import _ from 'lodash';
import { Button, Input, Space } from 'antd';
import { SearchOutlined, SettingOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';

export default (WrappedComponent) => {
  class ColumnsWrapper extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
      this.handleSearch = this.handleSearch.bind(this);
      this.handleReset = this.handleReset.bind(this);
      this.getColumnSearchProps = this.getColumnSearchProps.bind(this);
    }

    // 关键字搜索
    handleSearch(selectedKeys, confirm, key, searchOptions, setSearchOptions) {
      confirm();
      const nextSearchOptions = _.assign({}, searchOptions, { [key]: selectedKeys });
      setSearchOptions(nextSearchOptions);
    }
    handleReset(clearFilters, key, searchOptions, setSearchOptions) {
      clearFilters();
      const nextSearchOptions = _.assign({}, searchOptions);
      if (_.indexOf(_.keys(nextSearchOptions), key) > -1) {
        nextSearchOptions[key] = null;
      }
      setSearchOptions(nextSearchOptions);
    }
    getColumnSearchProps({ key, placeholder, searchOptions, setSearchOptions }) {
      return {
        filteredValue: _.isEmpty(searchOptions[key]) ? null : [searchOptions[key]],
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
          return (
            <div style={{ padding: 8 }}>
              <Input
                ref={(inputRef) => {
                  this.searchInput = inputRef;
                }}
                placeholder={placeholder || '关键字搜索'}
                value={selectedKeys}
                onChange={(e) => setSelectedKeys(e.target.value ? e.target.value : '')}
                onPressEnter={() =>
                  this.handleSearch(
                    selectedKeys,
                    confirm,
                    key,
                    searchOptions,
                    setSearchOptions,
                  )
                }
                style={{ marginBottom: 8, display: 'block' }}
              />
              <Space>
                <Button
                  size="small"
                  icon={<SettingOutlined />}
                  onClick={
                    () => setSelectedKeys('')
                    // this.handleReset(clearFilters, key, searchOptions, setSearchOptions)
                  }
                  style={{ width: 90 }}
                >
                  重置
                </Button>
                <Button
                  type="primary"
                  size="small"
                  icon={<SearchOutlined />}
                  style={{ width: 90 }}
                  onClick={() =>
                    this.handleSearch(
                      selectedKeys,
                      confirm,
                      key,
                      searchOptions,
                      setSearchOptions,
                    )
                  }
                >
                  搜索
                </Button>
              </Space>
            </div>
          );
        },
        filterIcon: (filtered) => (
          <SearchOutlined style={{ color: filtered ? '#00C874' : undefined }} />
        ),
        onFilterDropdownVisibleChange: (visible) => {
          if (visible) {
            setTimeout(() => this.searchInput.focus(), 100);
          }
        },
        render: (text) =>
          searchOptions[key] ? (
            <Highlighter
              autoEscape
              highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
              searchWords={_.isString(searchOptions[key]) ? [searchOptions[key]] : []}
              textToHighlight={text ? text.toString() : ''}
            />
          ) : (
            text
          ),
      };
    }

    render() {
      const { forwardedRef, ...restProps } = this.props;
      return (
        <WrappedComponent
          ref={forwardedRef}
          getColumnSearchProps={this.getColumnSearchProps}
          {...restProps}
        />
      );
    }
  }

  // HOC 透传ref
  return forwardRef((props, ref) => <ColumnsWrapper {...props} forwardedRef={ref} />);
};
